  <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <% 
    String path = request.getContextPath();
     %>
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}" ></c:set>
<script type="text/javascript" src="${path }/js/jquery-3.6.0.min.js""></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>资讯区官方文章详细内容</title>
    <link rel="stylesheet" href="<%=path %>/css/semantic.min.css">
    <link rel="stylesheet" href="<%=path %>/css/index.css">
</head>
<body>

<!--导航-->
<nav class="ui inverted segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">资讯区官方文章</h2>
           <!--  <a href="organization.html" class="activem-item item m-mobile-hide"><i class="home icon"></i>国际组织</a>-->
            <a href="#"  class="m-item item m-mobile-hide">网站总访问量:<span id="count">${applicationScope.onlineCount}</span>个</a>  
            <a href="${path}/web/index.jsp" class="m-item item m-mobile-hide"><!-- <i class="clone icon"></i> -->首页</a>
           
        </div>
    </div>

     
     
     <script type="text/javascript">
          //改变了监听器的数字
          function changeOnlineCount(){
         		$.ajax({
         			url:"${path}/ConsultingArticleController",
         			type:"post",
         			data:"action=getOnline",
         			success:function(mes){
         				//mes就是Controller控制器发送回来的count
         				$("#count").html(mes);
         			}
         		})
          }
          
          //网页加载结束之后,执行以下代码
          $(function(){
				//2000毫秒->2 秒
              setInterval(changeOnlineCount,2000);
          })
          
       </script>
     
     
     
     
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>
<!--中间-->

<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <!--header-->
        <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header">详细内容</h3>
                </div>
                <div class="right aligned column">
              	  <h3  class="ui orange header m-inline-block m-text-thin"></h3>
                   	您是网站第<h3 class="ui orange header m-inline-block m-text-thin">${sessionScope.onlineCount}</h3>位来访者
                </div>
            </div>
        </div>
        
        
        
        
         
         
         
         
        <div class="ui attached segment m-padded-tb-large">
            <div class="ui labeled button m-margin-tb-tiny" tabindex="0">
     
        </div>


        <div class="ui top attached segment teal">
            <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid">
                    <div class="ui eleven wide column">
                        <a href="${path }/ConsultingArticleController?action=findManagerById&id=${article.id}"><h3 class="ui header">${article.title}</h3></a>
                        <p class="m-text">${article.content}</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                     
                                    <div class="item">
                                        <!-- <i class="calendar icon"></i> --><fmt:formatDate value="${article.pubTime}" pattern="yyyy-MM-dd HH:mm"/>  
                                    </div>
                                    <div class="item">
                                        <%-- <img src="${path }/images/10.jpg" alt="" class="ui avatar image"> --%>
                                        <div class="content">
                                         		  <%-- <a href="#" class="header"> 阅读量:${sessionScope.onlineCount}</a> --%>
                                        </div>
                                    </div> 
                                   
                                </div>
                            </div>
                           
                        </div>
                    </div>




		
         
         
         

                    <div class="ui five wide column">
                        <a href="#" target="_blank">
                            <img src="${path}/images/articleImages/${article.pic}" alt="" class="ui rounded image" style="width: 150px;">
                        </a>
                    </div>

                </div>
            </div>





           <%--  <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid">
                    <div class="ui eleven wide column">
                        <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                        <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来没有想过，只是大家都那么做而已...........</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img src="" alt="" class="ui avatar image">
                                        <div class="content">
                                            <a href="#" class="header">惜缘</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2021-02-01
                                    </div>
                                    
                                </div>
                            </div>
                           
                        </div>
                    </div>


                    <div class="ui five wide column">
                        <a href="#" target="_blank">
                            <img src="" alt="" class="ui rounded image" style="width: 150px;">
                        </a>
                    </div>

                </div>
            </div>

            <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid">
                    <div class="ui eleven wide column">
                        <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                        <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来没有想过，只是大家都那么做而已...........</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img src="" alt="" class="ui avatar image">
                                        <div class="content">
                                            <a href="#" class="header">惜缘</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2021-02-01
                                    </div>
                                    
                                </div>
                            </div>
                            
                          
                        </div>
                    </div>


                    <div class="ui five wide column">
                        <a href="#" target="_blank">
                            <img src="" alt="" class="ui rounded image" style="width: ">
                        </a>
                    </div>

                </div>
            </div>

            <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid">
                    <div class="ui eleven wide column">
                        <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                        <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来没有想过，只是大家都那么做而已...........</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img src="" alt="" class="ui avatar image">
                                        <div class="content">
                                            <a href="#" class="header">惜缘</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2021-02-01
                                    </div>
                                    
                                </div>
                            </div>
                            
                        </div>
                    </div>


                    <div class="ui five wide column">
                        <a href="#" target="_blank">
                            <img src="${path }/images/1.jpg" alt="" class="ui rounded image" style="width: 150px;">
                        </a>
                    </div>

                </div>
            </div>

            <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid">
                    <div class="ui eleven wide column">
                        <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                        <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来没有想过，只是大家都那么做而已...........</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img src="" alt="" class="ui avatar image">
                                        <div class="content">
                                            <a href="#" class="header">惜缘</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2021-02-01
                                    </div>
                                   
                                </div>
                            </div>
                           
                        </div>
                    </div>


                    <div class="ui five wide column">
                        <a href="#" target="_blank">
                            <img src="" alt="" class="ui rounded image" style="width: 150px;">
                        </a>
                    </div>

                </div>
            </div>

            <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid">
                    <div class="ui eleven wide column">
                        <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                        <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来没有想过，只是大家都那么做而已...........</p>
                        
                       
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img src="" alt="" class="ui avatar image">
                                        <div class="content">
                                            <a href="#" class="header">惜缘</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2021-02-01
                                    </div>
                                   
                                </div>
                            </div>
                          
                        </div>
                    </div>


                    <div class="ui five wide column">
                        <a href="#" target="_blank">
                            <img src="" alt="" class="ui rounded image" style="width: 150px;">
                        </a>
                    </div>

                </div>
            </div> --%>
        </div>

        <!-- <div class="ui bottom attached segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <a href="#" class="ui mini teal basic button">上一页</a>
                </div>
                <div class="right aligned column">
                    <a href="#" class="ui mini teal basic button">下一页</a>
                </div>
            </div>
        </div> -->

    </div>



</div>



 <!--底部-->
<footer class="ui inverted vertical segment m-padded-tb-massive" >
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid" >
            <%-- <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="${path}/images/articleImages/${article.pic}" alt="" class="ui rounded image" style="width: 110px;">
                    </div>
                </div>

            </div>  --%>
            <!-- <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">用户故事（User Story）</a>
                </div>
            </div> -->
            <div style="margin:auto;" >
                <h4 class="ui inverted header"  >最新文章</h4>
                <div class="ui inverted link list" >
                	<c:forEach items="${articleTitles}" var="articleTitles">
                      <a href="${path}/ConsultingArticleController?action=findManagerById&id=${articleTitles.id}"><p class="m-text-thin m-text-spaced m-opacity-mini">${articleTitles.title}</p></a>
                	</c:forEach>
                </div>
            </div>
            <%-- <div class="three wide column">
                <h4 class="ui inverted header">发布时间</h4>
                <div class="ui inverted link list">
                   <c:forEach items="${articlePubTimes }" var="articlePubTimes">
                   	 <a href="#"><p><fmt:formatDate value="${articlePubTimes.pubTime }" pattern="yyyy-MM-dd HH:mm:ss"/></p></a>
                   </c:forEach>
                    <!-- <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">用户故事（User Story）</a> -->
                </div>
            </div> --%>
           
        </div>

        <div class="ui inverted section divider">

        </div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">China Aerospace © 中国航天</p>

    </div>



</footer>



<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/semantic.min.js"></script>

<script>
    $(".m-mobile-show").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    });

</script>

</body>
</html>